<template>
  <div class="article-detail">
    <oprate-icon-list :is-like="articleDetail.isLike"/>
    <div>
      <article-content :article-detail="articleDetail"/>
      <article-tags :tags="articleDetail.tags || ''"></article-tags>
      <comment ref="comment"/>
    </div>
    <div>
      <side-card title="关于作者">
        <author-about :article-detail="articleDetail"/>
      </side-card>
      <download style="margin: 10px"/>
    </div>
  </div>
</template>

<script>
import article from "@/api/article";

import ArticleContent from "@/views/detail/article-detail/article-content";
import OprateIconList from "@/views/detail/article-detail/oprate-icon-list";
import SideCard from "@/components/side-card";
import AuthorAbout from "@/views/detail/article-detail/author-about";
import Download from "@/components/download";
import Comment from "@/views/detail/comment/index";
import ArticleTags from "@/views/detail/article-detail/article-tags";
import comment from "@/api/comment";

export default {
  name: "article-detail",
  components: {ArticleTags, Comment, Download, AuthorAbout, SideCard, OprateIconList, ArticleContent},
  data() {
    return {
      articleDetail: {}
    }
  },
  created() {
    const {articleId} = this.$route.query
    article.getDetail(articleId)
        .then((res) => {
          if (res.code === 200) {
            this.articleDetail = res.data
            this.$refs.comment.articleId = res.data.articleId
            return comment.getList({articleId: res.data.articleId})
          } else {
            this.$error(res.msg)
          }
        })
        .then((res) => {
          if(res.code === 200){
            this.$refs.comment.commentList = res.data
          }else{
            this.$error(res.msg)
          }
        })
        .catch((err) => {
          this.$error(err)
        })
  }
}
</script>

<style lang="less" scoped>

.article-detail {
  display: flex;
  justify-content: center;

  .side-card {
    margin-left: 10px;
  }
}


</style>